<template>
	<tabbar currentPages="首页"></tabbar>

	<template>
		<view class="covor-btn" :class="{'covor-btn-right':isScrolling}">
			<image @click="shareApp" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-88.png" mode="widthFix"></image>
			<text @click="shareApp">分享</text>
			<!-- #ifdef MP-WEIXIN -->
			<button class="share" open-type="share">分享</button>
			<!-- #endif -->
		
			<view class="line"></view>
			<image @click="handleContact(getStudio.detail.phone)" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-133.png" mode="widthFix"></image>
			<text @click="handleContact(getStudio.detail.phone)">电话咨询</text>
			<view class="line"></view>
			<template v-if="bankSwitch">
				<image @click="onlineConsultation" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-134.png" mode="widthFix"></image>
				<text @click="onlineConsultation">在线咨询</text>
				<view class="line"></view>
			</template>
			<image @click="toYuyue" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-135.png" mode="widthFix"></image>
			<text @click="toYuyue">预约下单</text>
		</view>
	</template>
	<view>
		<view class="scroll-00">
			<view class="home-top" :style="{ height: `${!getHomeBanner.heightChange ? '682rpx' : '370rpx'}` }">
				<skeletons :loading="getStudio.loading" :rowsHeight="['562rpx']" :bgColor="true">
					<swiper
						:style="{ height: `${!getHomeBanner.heightChange ? '562rpx' : '250rpx'}` }"
						class="home-swiper-box"
						circular
						:indicator-dots="false"
						:autoplay="true"
						:interval="3000"
						:duration="500"
					>
						<swiper-item v-for="(item, index) in getStudio.banner" :key="`homeTop${index}`"> 
							<view class="item-img-box" :style="{ height: `${!getHomeBanner.heightChange ? '562rpx' : '250rpx'}` }">
								<image :src="item.picUrl" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</skeletons>

				<view class="home-info">
					<skeletons
						:loading="getStudio.loading"
						:rows="4"
						:avatar="true"
						:bgColor="true"
						:rowsWidth="['300rpx', '60%', '100%', '30%']"
						avatarShape="square"
						avatarSize="120rpx"
					>
						<view class="home-info-user" @click="getStudio.workspace">
							<image class="avatar" :src="getStudio.detail.avatar" mode="aspectFill"></image>
							<view class="user-info">
								<view class="name">{{ getStudio.detail.name }}</view>
								<view class="tags">
									<image @click.stop="getStudio.isDetails?getStudio.tipsToPage():''" v-for="(i, index) in getStudio.tips" :key="`homeInfo${index}`" class="tag" :src="i" mode="heightFix"></image>
								</view>
							</view>
						</view>
						<view class="tips">
							<view @click="detailRef.open()" class="xjs-line-two">
								{{ getStudio.detail.introduce }}
							</view>
						</view>
					</skeletons>
				</view>
			</view>
		</view>
		<view class="home-tab">
			<view class="tab-container">
				<view v-for="(item, index) in tab.list" :key="`homeTab${index}`" @click="tab.change(item, index)" class="tab-item active">
					<text :class="{ 'active-text': item.id == tab.current }">{{ item.name }}</text>
					<view class="line" :class="{ 'active-line': item.id == tab.current }">
						<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-101.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="scroll-01">
			<view class="tab-sevice">
				<view v-if="getStudioService.list != 0" class="service-list">
					<view v-for="(item, index) in getStudioService.list" :key="`tabSevice${index}`" @click="getStudioService.toPaymentOrder(item.id)" class="service-item">
						<image class="service-img" :src="item.thumPic" mode="aspectFill"></image>
						<view class="service-info">
							<view class="service-title">{{ item.name }}</view>
							<view class="service-desc xjs-line-two">{{ item.description }}</view>
							<view class="service-price">
								<text class="price">¥{{ item.minPrice }}起/次</text>
								<view class="service-btn xjs-btn-primary">去下单</view>
							</view>
						</view>
					</view>
				</view>
				<loadMore v-else status="empty" size="small" marginTop="50rpx" text="暂无服务" />
				<image class="jiazheng" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-151.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="scroll-02">
			<view class="title-header">
				<view class="title">
					<text>陪宠师团队</text>
					<text v-if="getPet.number" class="count">({{ getPet.number }})</text>
				</view>
				<view @click="getPet.toTeam" class="view-all">
					查看全部
					<uni-icons color="" type="right" size="13"></uni-icons>
				</view>
			</view>
			<view class="tab-pcs">
				<view class="pcs-banner">
					<image @click="getPet.tojoin" :src="getPet.banner" mode="widthFix" class="banner-img"></image>
				</view>

				<view v-if="getPet.list.length != 0" class="pcs-list">
					<view v-for="(item, index) in getPet.list" :key="`tabPcs${index}`" @tap="getPet.toDailyServiceIndex(item.userId)" class="pcs-item">
						<image :src="item.user.avatar" mode="aspectFill" class="pcs-avatar"></image>
						<view class="pcs-name xjs-line-one">{{ item.user.nickName }}</view>
						<view class="pcs-desc xjs-line-two">{{ item.user.petsitterIntroduce }}</view>
					</view>
				</view>
				<loadMore v-else status="empty" size="small" marginTop="50rpx" text="暂无陪宠师" />
			</view>
		</view>

		<view class="scroll-03">
			<view class="title-header scroll-03">
				<view class="title">
					<text>服务日常</text>
					<text v-if="getServiceDay.number" class="count">({{ getServiceDay.number }})</text>
				</view>
				<view @click="getServiceDay.toDailyService" class="view-all">
					查看全部
					<uni-icons color="" type="right" size="13"></uni-icons>
				</view>
			</view>
			<view class="tab-daily">
				<template v-if="getServiceDay.list.length != 0">
					<swiper class="swiper" next-margin="270rpx" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" @change="getServiceDay.change">
						<swiper-item v-for="(item, index) in getServiceDay.list" :key="`tabDaily${index}`">
							<view @tap="getServiceDay.toDailyServiceDetail(item.id,item.petsitterNickName)" class="swiper-item">
								<image class="daily-img" :src="item.coverPic.split(',')[0]" mode=""></image>
								<view class="daily-intro">
									<view class="xjs-line-two">{{ item.content }}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="dots-content">
						<view
							:class="['dots-item', getServiceDay.current == index ? 'dots-item-active' : '']"
							v-for="(item, index) in getServiceDay.list"
							:key="`lists-${index}`"
						></view>
					</view>
				</template>
				<loadMore v-else status="empty" size="small" marginTop="50rpx" text="暂无服务日常" />
			</view>
		</view>

		<view class="scroll-04">
			<view class="title-header scroll-04">
				<view class="title">
					<text>服务评价</text>
					<text v-if="getComment.number" class="count">({{ getComment.number }})</text>
				</view>
				<view v-if="getComment.number" @click="getComment.toEvaluate" class="view-all">
					查看全部
					<uni-icons color="" type="right" size="13"></uni-icons>
				</view>
			</view>
			<view class="tab-comment">
				<view v-if="getComment.list.length != 0" v-for="(item, index) in getComment.list" :key="`tabComment${index}`" class="comment-card">
					<view class="comment-header">
						<view class="user-info">
							<image
								class="avatar"
								:src="item.ifAnonymous ? item.userAvatar : 'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-15.png'"
								mode="aspectFill"
							></image>
							<view>
								<view class="user-name xjs-line-one">{{ item.nickName }}</view>
								<view class="rating">
									<image
										v-for="(i, index) in item.comprehensiveEvaluation"
										:key="`evaluation${index}`"
										class="star"
										src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-89.png"
										mode="aspectFill"
									></image>
								</view>
							</view>
						</view>
						<view class="comment-date">{{ item.createTime.split(' ')[0] }}</view>
					</view>
					<view class="comment-content">
						<view class="service-info">项目：{{ item.goodsName }} | 服务：{{ item.petsitterNickName }}</view>
						<view class="comment-text">{{ item.content }}</view>
					</view>
				</view>
				<loadMore v-else status="empty" size="small" marginTop="50rpx" text="暂无评价" />
			</view>
		</view>
	</view>
	<view style="height: 220rpx"></view>
	<uni-popup ref="detailRef" type="bottom" background-color="#fff" border-radius="32rpx 32rpx 0 0">
		<view class="popup-content">
			<view class="popup-title">
				<text>介绍</text>
				<text class="close-icon" @click="detailRef.close()">×</text>
			</view>
			<view class="html">{{ getStudio.detail.introduce }}</view>
		</view>
	</uni-popup>
	<versionUpdate ref="versionUpdateRef"></versionUpdate>
</template>

<script setup lang="ts">
import api from '@/api';
import { getLocation } from '@/hooks/useFunction';
import { onShow, onLoad, onPageScroll, onPullDownRefresh, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { reactive, ref, watch, getCurrentInstance, onMounted, nextTick } from 'vue';
import { useStudioStoreToRefs } from '@/store/useStudioStore';
import { loginStatus } from '@/hooks/useLogin';
import { useConfigStore,useConfigStoreToRefs } from '@/store/useConfigStore'
import { accredit } from '@/hooks/useAppPermission/index';
const { setAppConfig } = useConfigStore()
const { bankSwitch } = useConfigStoreToRefs()
let { workSpace } = useStudioStoreToRefs();
import { useUserStoreToRefs } from '@/store/useUserStore';
import configs from '@/config';
const { isCheck, userInfo,shareRefereeId, shareStudioId } = useUserStoreToRefs();
const getHomeBanner = reactive<any>({
	heightChange: false,
	getHomeBanner: () => {
		setTimeout(() => {
			getHomeBanner.heightChange = true;
			nextTick(() => {
				setTimeout(() => {
					tab.getTopArr(0, 0, []);
				}, 1000);
			});
		}, 10000);
	}
});
const param = ref<any>({});
onPullDownRefresh(async () => {
	//存在表示分享进来的就查看别人的首页，否则查看自己的首页
	//分享进来会携带shareRefereeId和shareStoreId,存在着覆盖原先的studioId
	//在首页onload中如果存在分享进来的工作室id这跳转此页面查看分享工作室的内容，分享工作室id和推荐人app.vue首次打开时清空，如是分享进来的链接则会重新赋值，否则清空
	getStudio.studioId = shareStudioId.value;
	await getHomeBanner.getHomeBanner();
	await getStudio.getStudioDetail();
	await getStudioService.getList();
	await getPet.getList();
	await getServiceDay.getList();
	await getComment.getList();
	//所有数据请求完成后进入这开启计算元素高度
	nextTick(() => {
		tab.arr = [];
		tab.getTopArr(0, 0, []);
	});
	uni.stopPullDownRefresh();
});
const versionUpdateRef = ref();
onLoad(async (params: any) => {
	param.value = params;
});
onMounted(() => {
	versionUpdateRef.value && versionUpdateRef.value.check();
});
onShow(async () => {
	setAppConfig()
	//存在表示分享进来的就查看别人的首页，否则查看自己的首页
	//分享进来会携带shareRefereeId和shareStoreId,存在着覆盖原先的studioId
	if (param.value.shareStoreId) {
		getStudio.studioId = param.value.shareStoreId;
	}
	//更新配置接口
	await getHomeBanner.getHomeBanner();
	await getStudio.getStudioDetail();
	await getStudioService.getList();
	await getPet.getList();
	await getServiceDay.getList();
	await getComment.getList();
	//所有数据请求完成后进入这开启计算元素高度
	nextTick(() => {
		setTimeout(() => {
			tab.arr = [];
			tab.getTopArr(0, 0, []);
		}, 1000);
	});
});
//分享
onShareAppMessage(() => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&type=2`;
	return {
		title: getStudio.detail.name,
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: getStudio.detail.avatar
	};
});
const shareApp = async () => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&type=2`;
	const res: any = await api({
		method: 'POST',
		url: `/mall/user/v2/generateWxUrlLink`,
		data: {
			path: '/pages/shareRefereeId/index',
			query: `q=${encodeURIComponent(cans)}`,
			envVersion: configs.envVersion
		}
	});
	uni.shareWithSystem({
		summary: '',
		href: res.data,
		success() {
			// 分享完成，请注意此时不一定是成功分享
		},
		fail() {
			// 分享失败
		}
	});
	// uni.request({
	// 	url: 'https://api.weixin.qq.com/cgi-bin/token',
	// 	method: 'GET',
	// 	data: {
	// 		grant_type: 'client_credential',
	// 		appid: 'wxe8f0b0571efa1c11',
	// 		secret: '8d0dbd03b166bca9b2e7979434d49377'
	// 	}
	// }).then((res : any) => {
	// 	console.log(res.data.access_token);
	// 	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&type=2`;
	// 	uni.request({
	// 		url: `https://api.weixin.qq.com/wxa/generate_urllink?access_token=${res.data.access_token}`,
	// 		method: 'POST',
	// 		data: {
	// 			path: '/pages/shareRefereeId/index',
	// 			query: `q=${encodeURIComponent(cans)}`,
	// 			env_version: 'develop',
	// 			expire_type: 1,
	// 			expire_interval: '30'
	// 			// 正式版为 "release"，体验版为"trial"，开发版为"develop"
	// 		}
	// 	}).then((res : any) => {
	// 		uni.shareWithSystem({
	// 			summary: '',
	// 			href: res.data.url_link,
	// 			success() {
	// 				// 分享完成，请注意此时不一定是成功分享
	// 			},
	// 			fail() {
	// 				// 分享失败
	// 			}
	// 		});
	// 	});
	// });
};
// 在线咨询
const handleContact = async (item) => {
	// #ifdef APP
	const status = await accredit('CALL_PHONE')
	if (status != 1) return
	// #endif
	if (!item) {
		uni.showToast({
			icon: 'none',
			title: '暂未设置咨询电话'
		});
		return;
	}
	uni.makePhoneCall({
		phoneNumber: item
	});
	// uni.showModal({
	// 	title: '提示',
	// 	content: '客服上班时间：周一到周六 09:30~18:30',
	// 	confirmText: '确定呼叫'
	// }).then((e) => {
	// 	console.log(e);
	// 	if (e.confirm) {
			
	// 	}
	// });
};
//在线咨询
const onlineConsultation = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/studio/petsitter-team/getManager?studioId=${getStudio.studioId}`
	});
	console.log(res.data)
	if(res.data){
		uni.navigateTo({
			url: `/pages/im/message/index?id=${res.data.id}&username=${res.data.nickName}&avatar=${res.data.avatar}`
		});
	}
	
};
//预约下单
const toYuyue = () => {
	tab.change(
		{
			name: '服务',
			type: 'service',
			id: 1
		},
		0
	);
};
const timer = ref(null)
const isScrolling = ref(false)
onPageScroll((e) => {
	isScrolling.value = true
	if(timer.value){
		clearTimeout(timer.value)
	}
	timer.value = setTimeout(()=>{
		isScrolling.value = false
	},1000)
	
	if (!tab.isChanging) {
		for (let i = 0; i < tab.arr.length - 1; i++) {
			let height = tab.arr[i] - 20;
			let height2 = tab.arr[i + 1] - 20;
			if (height <= e.scrollTop && e.scrollTop <= height2) {
				tab.current = i + 1;
				return true;
			}
		}
	}
});
const instance = getCurrentInstance();
const tab = reactive<any>({
	current: 1,
	list: [
		{
			name: '服务',
			type: 'service',
			id: 1
		},
		{
			name: '陪宠师',
			type: 'pet',
			id: 2
		},
		{
			name: '日常',
			type: 'daily',
			id: 3
		},
		{
			name: '评价',
			type: 'comment',
			id: 4
		}
	],
	isChanging: false,
	arr: [],
	change: (item, index) => {
		if (tab.arr.length < 5) {
			return false;
		}
		if (tab.isChanging) {
			return false;
		}
		tab.isChanging = true;
		tab.current = item.id;
		console.log(tab.arr[index]);
		uni.pageScrollTo({
			scrollTop: tab.arr[index],
			duration: 300,
			success: () => {
				setTimeout(() => {
					tab.isChanging = false;
				}, 500);
			}
		});
	},
	getTopArr: (num, height, arr) => {
		if (num > 4) {
			tab.arr = arr;
			return;
		}
		let query = uni.createSelectorQuery().in(instance);
		query
			.select(`.scroll-0${num}`)
			.boundingClientRect((data: any) => {
				height += data.height;
				arr.push(height);
				num++;
				tab.getTopArr(num, height, arr);
			})
			.exec();
	}
});
// 顶部详情
const detailRef = ref();
const getStudio = reactive<any>({
	studioId: '',
	userStudioId: '',
	banner: [],
	tips: [],
	loading: false,
	detail: {},
	isDetails:0,
	workspace:()=>{
		uni.navigateTo({
			url: `/pages/studio/indexDetails/index?studioId=${getStudio.studioId}`
		});
	},
	getUserStudio: async () => {
		const res: any = await api({
			method: 'get',
			url: `/mall/studio/getUserStudioId`
		});
		getStudio.studioId = res.data;
		getStudio.userStudioId = res.data || '';
	},
	getStudioDetail: async () => {
		if (!getStudio.detail.name) {
			//骨架屏第一次没数据的时候显示，后续存在数据的时候不显示骨架屏
			getStudio.loading = true;
		}
		// const locat: any = await getLocation();
		const locat = {
			longitude:"114.3215",
			latitude:"30.5674"
		}
		const res: any = await api({
			method: 'get',
			url: `/mall/studio/getStudioDetail/${getStudio.studioId}`,
			data: {
				longitudes: locat.longitude,
				latitudes: locat.latitude
			}
		});
		console.log('res.data.picJson',res.data.picJson)
		if (res.data.picJson && JSON.parse(res.data.picJson).length>0) {
			getStudio.banner = JSON.parse(res.data.picJson);
		}else{
			getStudio.banner = [{
				picUrl:"https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/home-banner-default.png"
			}]
		}
		getStudio.detail = res.data;
		const res2: any = await api({
			method: 'get',
			url: `/mall/content/home-page-config/list`
		});
		console.log(res2.data);
		if (res2.data.length > 0) {
			res2.data.forEach((item) => {
				if (item.type == 4 && item.areaPic) {
					getStudio.tips = item.areaPic.split(',');
					getStudio.isDetails = item.isDetails
				}
			});
		}
		getStudio.loading = false;
	},
	tipsToPage: () => {
		uni.navigateTo({
			url: '/pages/studio/certificationDetails/index'
		});
	}
});

//获取服务列表
const getStudioService = reactive<any>({
	list: [],
	//去下单
	toPaymentOrder: (id: string) => {
		uni.navigateTo({
			url: `/pages/serviceDetails/details/index?studioGoodsId=${id}&studioId=${getStudio.studioId}`
		});
	},
	getList: async () => {
		const res: any = await api({
			method: 'get',
			url: `/mall/goods/goods/list`,
			data:{userId:''}
		});
		if (res) {
			getStudioService.list = res.data;
		}
	}
});

//获取陪宠师
const getPet = reactive<any>({
	number: 0,
	banner: '',
	list: [],
	tojoin:()=>{
		uni.navigateTo({
			url: '/pages/applyPetTeacher/index/index'
		});
	},
	getBanner: async () => {
		const res: any = await api({
			method: 'get',
			url: `/mall/content/backend-configs/getHomeConfig`
		});
		getPet.banner = res.data['xjs.content.contentConfig.recruitShareBanner'];
	},
	getNumber: async () => {
		const res: any = await api({
			method: 'get',
			url: `/mall/studio/petsitter-team/getAllCount`,
			data: {
				studioId: getStudio.studioId
			}
		});
		getPet.number = res.data.teamCount || 0;
		getServiceDay.number = res.data.serviceDailyCount || 0;
	},
	getList: async () => {
		await getPet.getBanner();
		await getPet.getNumber();
		const res: any = await api({
			method: 'get',
			url: `/mall/studio/petsitter-team/homePage`,
			data: {
				studioId: getStudio.studioId
			}
		});
		getPet.list = res.data;
	},
	toDailyServiceIndex: (id: string) => {
		uni.navigateTo({
			url: `/pages/studio/petCompanionTeacherIndex/index?userId=${id}&studioId=${getStudio.studioId}`
		});
	},
	toTeam: () => {
		uni.navigateTo({
			url: `/pages/studio/team/index?studioGoodsId=${getStudio.studioId}`
		});
	}
});

//获取服务日常
const getServiceDay = reactive<any>({
	number: 0,
	list: [],
	current: 0,
	getList: async () => {
		const res: any = await api({
			method: 'get',
			url: `/mall/order-service-daily/homePage`,
			data: {
				studioId: getStudio.studioId
			}
		});
		getServiceDay.list = res.data;
	},
	toDailyServiceDetail: (id : string,petsitterNickName:string) => {
		uni.navigateTo({
			url: `/pages/studio/dailyServiceDetail/index?id=${id}&petsitterNickName=${petsitterNickName}`
		});
	},
	toDailyService: () => {
		uni.navigateTo({
			url: `/pages/studio/dailyService/index?studioGoodsId=${getStudio.studioId}`
		});
	},
	change: (event) => {
		getServiceDay.current = event.detail.current;
	}
});

//获取服务评价
const getComment = reactive<any>({
	number: 0,
	list: [],
	getList: async () => {
		const res: any = await api({
			method: 'get',
			url: `/mall/order/assess/page`,
			data: {
				page: 1,
				limit: 6,
				studioId: getStudio.studioId
			}
		});
		getComment.list = res.data.records;
		getComment.list.map(item=>{
			item.nickName = item.ifAnonymous?item.nickName:item.nickName.slice(0, 1) + '**'
		})
		getComment.number = res.data.total;
	},
	toEvaluate: () => {
		console.log();
		uni.navigateTo({
			url: `/pages/studio/serviceEvaluation/index?studioId=${getStudio.studioId}`
		});
	}
});
</script>

<style lang="scss" scoped>
.covor-btn-right{
	right: - 140rpx !important;
}
.covor-btn {
	position: fixed;
	right: 16rpx;
	top: 10vh;
	z-index: 20;
	background-color: rgba(255, 255, 255, 0.8);
	border: 4rpx solid #fff;
	border-radius: 50rpx;
	width: 112rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 20rpx;
	padding: 30rpx 0;
	box-sizing: border-box;
	transition: all 0.3s linear;
	image {
		width: 40rpx;
		height: 40rpx;
	}

	.line {
		width: 24rpx;
		height: 2rpx;
		background-color: #e7dddd;
		margin: 30rpx 0;
	}

	.share {
		position: absolute;
		top: 30rpx;
		width: 112rpx;
		height: 100rpx;
		opacity: 0;
	}
}

.popup-content {
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 40rpx;

	.popup-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		font-size: 32rpx;
		font-weight: 500;

		.close-icon {
			font-size: 48rpx;
			color: #999;
			line-height: 1;
		}
	}
	.html {
		max-height: 70vh;
		overflow-y: scroll;
		font-size: 26rpx;
		color: #7c807f;
		line-height: 1.6;
	}
}
.home-top {
	position: relative;
	height: 682rpx;
	transition: all 0.3s;

	.home-swiper-box {
		width: 750rpx;
		height: 562rpx;

		.item-img-box {
			overflow: hidden;
			>image{
				width: 750rpx;
				height: 562rpx;
			}
		}
	}

	.home-info {
		position: absolute;
		left: 32rpx;
		bottom: 0;
		width: calc(100% - 64rpx);

		.home-info-user {
			display: flex;
			align-items: center;
			padding: 20rpx 32rpx 30rpx;
			box-sizing: border-box;
			border-radius: 24rpx 24rpx 0 0;
			background-color: #fff;

			.avatar {
				width: 144rpx;
				height: 144rpx;
				border-radius: 24rpx;
				margin-right: 16rpx;
				flex-shrink: 0;
				margin-top: -48rpx;
			}

			.user-info {
				flex: 1;

				.name {
					font-size: 40rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 16rpx;
				}

				.tags {
					display: flex;
					flex-wrap: wrap;
					.tag {
						height: 38rpx;
						margin-right: 8rpx;
						will-change: transform;
					}

					// .tag {
					// 	font-size: 22rpx;
					// 	color: var(--color-primary);
					// 	border: 1rpx solid var(--color-primary);
					// 	padding: 4rpx 12rpx;
					// 	border-radius: 8rpx;
					// 	margin-right: 8rpx;
					// }
				}
			}
		}

		.tips {
			padding: 0 32rpx 32rpx;
			background-color: #fff;
			border-radius: 0 0 24rpx 24rpx;

			> view {
				padding-top: 32rpx;
				font-size: 26rpx;
				color: #7c807f;
				border-top: 1rpx solid #e8d8dd;
			}
		}
	}
}

.home-tab {
	position: sticky;
	top: 0;
	border-radius: 24rpx;
	padding: 28rpx 32rpx 36rpx;
	background-color: var(--pages-bg-color);
	z-index: 10;

	.tab-container {
		display: flex;
		justify-content: space-around;
		align-items: center;

		.tab-item {
			position: relative;
			font-size: 30rpx;
			color: #5c5e5e;
			display: flex;
			flex-direction: column;
			align-items: center;

			&.active {
				font-weight: 500;
				position: relative;

				.active-line {
					opacity: 1 !important;
				}

				.active-text {
					font-size: 40rpx !important;
					color: #1b2120 !important;
				}

				.line {
					position: absolute;
					left: 50%;
					margin-left: -20rpx;
					bottom: -25rpx;
					opacity: 0;
					transition: all 0.1s linear;

					> image {
						width: 40rpx;
						height: 14rpx;
					}
				}
			}
		}
	}
}

.tab-sevice {
	margin: 0 32rpx;
	.jiazheng {
		width: 100%;
	}
	.service-list {
		.service-item {
			display: flex;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 32rpx;
			margin-bottom: 24rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.service-img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 16rpx;
				margin-right: 24rpx;
				flex-shrink: 0;
			}

			.service-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.service-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #1b2120;
					margin-bottom: 12rpx;
				}

				.service-desc {
					font-size: 26rpx;
					color: #5c5e5e;
					margin-bottom: 24rpx;
				}

				.service-price {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.service-btn {
						width: 136rpx;
						height: 64rpx;
						font-size: 26rpx;
					}

					.price {
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
}

// 标题
.title-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 64rpx 32rpx 24rpx;

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;

		.count {
			font-size: 28rpx;
			color: #8e8c8c;
			font-weight: normal;
			margin-left: 8rpx;
		}
	}

	.view-all {
		font-size: 26rpx;
		color: #5c5e5e;
	}
}

.tab-pcs {
	margin:0 32rpx;

	.pcs-banner {
		width: 100%;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 24rpx;

		.banner-img {
			width: 100%;
			display: block;
		}
	}

	.pcs-list {
		display: flex;
		// justify-content: space-between;
		flex-wrap: nowrap;
		overflow-x: scroll;

		.pcs-item {
			width: 268rpx;
			height: 334rpx;
			background-color: #fff;
			border-radius: 24rpx;
			overflow: hidden;
			padding: 0 24rpx;
			margin-right: 16rpx;
			flex-shrink: 0;
			box-sizing: border-box;

			.pcs-avatar {
				width: 136rpx;
				height: 136rpx;
				border-radius: 50%;
				margin: 32rpx auto 0;
				display: block;
			}

			.pcs-name {
				font-size: 30rpx;
				font-weight: 500;
				color: #1b2120;
				margin: 24rpx 0;
				text-align: center;
			}

			.pcs-desc {
				font-size: 24rpx;
				color: #808080;
			}
		}
	}
}

.tab-daily {
	width: calc(100% - 64rpx);
	margin: 0 auto;
	overflow: hidden;

	.swiper {
		height: 524rpx;

		.swiper-item {
			width: 400rpx;
			height: 524rpx;
			border-radius: 24rpx;
			overflow: hidden;
			background-color: #fff;

			.daily-img {
				width: 400rpx;
				height: 400rpx;
			}

			.daily-intro {
				padding: 16rpx 24rpx 24rpx;
				box-sizing: border-box;
				color: #1b2120;
				font-size: 28rpx;
			}
		}
	}

	.dots-content {
		width: 100%;
		text-align: center;

		.dots-item-active {
			width: 32rpx !important;
			height: 8rpx !important;
			background: var(--color-primary) !important;
			border-radius: 200rpx 200rpx 200rpx 200rpx !important;
		}

		.dots-item {
			display: inline-block;
			margin: 0 8rpx;
			width: 8rpx;
			height: 8rpx;
			background: #cccccc;
			border-radius: 50%;
			transition: all 0.25s linear;
		}
	}
}

.tab-comment {
	margin: 0 32rpx;

	.comment-card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 32rpx;
		.comment-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.user-info {
				display: flex;
				align-items: center;

				.avatar {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.user-name {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					margin-right: 16rpx;
					margin-bottom: 4rpx;
					width: 350rpx;
				}

				.rating {
					display: flex;

					.star {
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}
				}
			}

			.comment-date {
				font-size: 26rpx;
				color: #7c807f;
			}
		}

		.comment-content {
			.service-info {
				font-size: 24rpx;
				color: #7c807f;
				margin-bottom: 16rpx;
			}

			.comment-text {
				font-size: 30rpx;
				color: #1b2120;
				line-height: 1.6;
			}
		}
	}
}
</style>
